<section class="main-section grid_7">

	<div class="main-content">
		<header>
			<ul class="action-buttons clearfix fr">
				<li><a href="/html/help/users.html" class="button button-gray no-text help" rel="#overlay">Help<span class="help"></span></a></li>
			</ul>
			<h2>Users</h2>
		</header> 
		<section class="container_6 clearfix">
			<div class="grid_6">
				<div class="tabbed-pane">
					<ul class="tabs">
						<li><a href="#">Order By Name</a></li>
						<li><a href="#">Order By Points</a></li>
						<li><a href="#">Add User</a></li>
						<li><a href="#">Award User</a></li>
					</ul>
					<div class="panes clearfix">
						<section id="usersOrderedByNameSection">
							<h3>Users ordered by name</h3>
                                                        {% if has_error %}
                                                          <div class="message error">{{ error }}</div>
                                                        {% endif %}

							<p>Click on a user to view information.</p>
							<hr />
							<table class="datatable">
								<thead>
									<tr>
										<th>Name</th>
										<th>Points</th>
										<th></th>
									</tr>
								</thead>
								<tbody id="usersOrderedByNameTBody">
								</tbody>
							</table>
                                                        <div id="ByNameMessage"><br/>No users yet. Learn how to add users <a target="_blank" href="http://code.google.com/p/userinfuser/wiki/API_Documentation#Users">here</a></div>
							<br />
							<div id="getMoreByName">
							<button class="button button-gray" onclick="getMoreByName(1)">See more</button>
							</div>
							<br />
						</section> 
						<section id="usersOrderedByPointsSection">
							<h3>Users ordered by points</h3>
							<p>Click on a user to view information.</p>
							<hr />
							<table class="datatable">
								<thead>
									<tr>
										<th>Name</th>
										<th>Points</th>
										<th></th>
									</tr>
								</thead>
								<tbody id="usersOrderedByPointsTBody">
								</tbody>
							</table>
                                                        <div id="ByPointsMessage"><br/>No users yet. Learn how to add users <a target="_blank" href="http://code.google.com/p/userinfuser/wiki/API_Documentation#Users">here</a></div>
							<br />
							<div id="getMoreByPoints">
								<button class="button button-gray" onclick="getMoreByPoints(1)">See more</button>
							</div>
							<br />
						</section>
                                                <section id="addUser">
                                                   <h3>Add a New User</h3>
                                                   <hr/>
                                                        <div class="message info">Note: Use the API call update_user to add users within your application.</div>
                                                          
                                                          <form id="form" class="form grid_5" action="/adminconsole/users/add" method="post" enctype="multipart/form-data">
                                                                        <fieldset>
                                                                                <legend>Create a new user</legend>
                                                                                <label>Unique ID<em>*</em><small>(i.e. email)</small></label><input type="text" name="id" required="required" />

                                                                                <label>Name<em></em><small>(public name)</small></label><input type="text" name="username" />
                                                                                <label>Profile Link<em></em><small>(full URL)</small></label><input type="text" name="profile" />
                                                                                <label>Image Link<em></em><small>(full URL)</small></label><input type="text" name="image" />
                                                                                <div class="action">
                                                                                        <button class="button button-gray" type="submit"><span class="accept"></span>OK</button>
                                                                                        <button class="button button-gray" type="reset">Reset</button>
                                                                                </div>
                                                                        </fieldset>
                                                                </form>

                                                </section>
                         <section id="Award User">
                                                   <h3>Award a user a badge or points</h3>
                                                   <hr/>
                                                        <div class="message info">Note: Use the API calls award_badge, award_badge_points, and award_points to award users within your application.</div>
                                                          
                                                          <form id="form" class="form grid_5" action="/adminconsole/users/award" method="post" enctype="multipart/form-data">
                                                                        <fieldset>
                                                                                <legend>Award a badge</legend>
                                                                                <label>User Id<em>*</em><small></small></label><input type="text" name="userid" required="required" />
                                                                                <label>Badge Id<em>*</em><small></small></label></br>
<div>
      <div>
        <select data-placeholder="Choose a badge..."  style="width:270px;" tabindex="1" name="badgeid">
          {% for badge in badges %}
              <option value="{{badge.id}}">{{badge.id}}</option> 
          {% endfor %}
          {% if not badges %}
              <option value="">Upload a badge first</option> 
          {% endif %}
        </select>        
      </div>
</div>
                                                                                <input type="hidden" name="awardtype" value="awardbadge" />
                                                                                <div class="action">
                                                                                        <button class="button button-gray" type="submit" ><span class="accept"></span>OK</button>
                                                                                        <button class="button button-gray" type="reset" >Reset</button>
                                                                                </div>
                                                                        </fieldset>
                                                                </form>
                                                        <form id="form" class="form grid_5" action="/adminconsole/users/award" method="post" enctype="multipart/form-data">
                                                                        <fieldset>
                                                                                <legend>Award points</legend>
                                                                                <label>User Id<em>*</em><small></small></label><input type="text" name="userid" required="required" />
                                                                                <label>Points<em>*</em><small></small></label><input type="text" name="points" value="0" required="required" />
                                                                                <input type="hidden" name="awardtype" value="awardpoints"/>
                                                                                <div class="action">
                                                                                        <button class="button button-gray" type="submit" ><span class="accept"></span>OK</button>
                                                                                        <button class="button button-gray" type="reset" >Reset</button>
                                                                                </div>
                                                                        </fieldset>
                                                                </form>

                                                </section>    <span id="loader" class="apple_overlay black" style="background-image: none; z-index: 10000; block:inline-block"><img src="/console/images/ajax-loader.gif"/></span>
					</div>
				</div>
			</div>
		</section>
	</div>
</section>
